<template>
  <div :class="['newsDetail', { policy: listType == 2 }]">
    <!-- <p class="clearfix">
      <el-button class="fr" type="custom" @click="toback()" plain
        >返回上一页</el-button
      >
    </p> -->
    <div class="">
      <p class="title">{{ dataPage.title }}</p>
      <p class="subTitle" v-if="dataPage.subTitle">{{ dataPage.subTitle }}</p>
      <p class="title-detail">
        <span>作者：{{ dataPage.author }}</span>
        <span v-if="listType == 2">
          来源：{{ dataPage.source ? dataPage.source : '--' }}
        </span>
        <span v-if="listType == 2"> 点击数：{{ dataPage.clickCount }} </span>
        <span>发布时间：{{ dataPage.pudDate }}</span>
      </p>
      <div class="box">
        <div class="news-wrap">
          <div class="content-wrap-in" v-html="content"></div>
        </div>
      </div>
      <AttachmentList
        v-if="dataPage.hasOwnProperty('sysNoticeFilesList')"
        :fileList="dataPage.sysNoticeFilesList"
      />
    </div>
  </div>
</template>
<script>
import {
  openApiSysNoticeQueryNoticeBySysIds,
  openApiSysPolicyQueryById,
} from '@/api/openApi'
export default {
  components: {
    AttachmentList: () => import('@/components/resource/attachmentList.vue'),
  },
  data() {
    return {
      dataPage: {},
      content: '',
      listType: 1,
      ids: '',
    }
  },
  methods: {
    getList() {
      if (this.listType == 1 || this.listType == 3 || this.listType == 4) {
        this.getNotice()
      }
      if (this.listType == 2) {
        this.getPolicy()
      }
    },
    // 通知公告
    getNotice() {
      let { id } = this.$route.query
      openApiSysNoticeQueryNoticeBySysIds({ id }).then((res) => {
        this.dataPage = res.data.data[0]
        this.articleStyleInit(this.dataPage.content)
      })
    },
    // 政策法规
    getPolicy() {
      let { id } = this.$route.query
      openApiSysPolicyQueryById(id).then((res) => {
        this.dataPage = res.data.data[0]
        this.articleStyleInit(this.dataPage.content)
      })
    },
    articleStyleInit(content) {
      this.content = content
        .replace(/&nbsp;/gi, '') //清除空格
        .replace(/\s+style="[^"]*"/g, '') //清除style样式
        .replace(
          /\<img/gi,
          '<img style="max-width: 90%;margin: 10px auto;display: inherit;border: 1px solid #eee;"',
        ) //设置图片class
    },
    toback() {
      this.$router.go(-1)
    },
  },
  created() {
    window.scrollTo(0, 0)
    this.listType = this.$route.query.listType
    this.getList()
  },
}
</script>

<style  lang="scss" >
.newsDetail {
  padding: 0 30px 30px;
  min-height: 600px;
  .title {
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    padding-top: 20px;
    color: #333;
  }
  .subTitle {
    text-align: center;
    font-size: 16px;
    padding: 15px 0;
  }
  .title-detail {
    text-align: center;
    span {
      display: inline-block;
      padding-right: 30px;
      color: #909399;
      font-size: 12px;
    }
    border-top: 3px solid #930b0b;
    margin: 10px 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .content-wrap-in {
    color: #333;
    text-indent: 2em;
    font-size: 16px !important;
    line-height: 2;
    span {
      color: #333;
      text-indent: 2em;
      font-size: 16px;
      line-height: 2;
    }
    .img-style {
      max-width: 90%;
      margin: 0 auto;
      display: inherit;
      font-family: '微软雅黑';
    }
  }
}
.policy {
  .box {
    padding: 5px 120px;
    background-color: #333;
  }
  .news-wrap {
    padding: 10px 40px;
    background-color: #fff;
    max-height: 800px;
    overflow-y: auto;
  }
}
</style>
